Beth Kun's profile

Vertically Scrolling Responsive Website

Portfolio Website
In designing my current website, I knew I wanted it to be a fully vertical layout, to compliment the growing popularity of mobile devices.  I also made the site responsive, to give more viewing space to what's really important on smaller screens.  You can find the real thing at http://bethkun.com/
The tablet view retains the fixed position nav bar. But in the mobile view, I completely deleted the navbar, and added a line instructing the viewer to scroll down manually, since this is really how mobile users navigate anyway. I also changed the text formatting to allow text lines to run longer and take up more horizontal space.
I have captured this Portfolio page in mid-scroll so that you can see the position of the description/nav area remains fixed while the viewer scrolls down to see the work samples. This ensures that the viewer will not have to scroll all the way back to the top in order to move on to the next window.
In the Tablet and Mobile views of the portfolio pages, the description/nav box jumps up to the top of the page, allowing the work samples to take up all the horizontal space for better viewing on smaller screens. As you can see, the nav box has also lost its fixed positioning, since it would take up too much viewing space otherwise.
Vertically Scrolling Responsive Website
Published:

Vertically Scrolling Responsive Website

This is the redesign of my personal site in a fully vertical format.

Published: